<template>
  <div>
    <a-cascader
      v-model:value="positionVal"
      :options="options"
      :load-data="loadData"
      placeholder="选择省/市/区"
      change-on-select
      @change="changePosition"
      :allowClear="false"
    />
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { getCity } from '@/api/Community/api'
const islear: any = defineModel()
const emit = defineEmits(['onSelect'])
const level = ref(0)
const parentCode = ref(0)
const provincesId = ref(0)
const citiesId = ref(0)
const districtsId = ref(0)
const provincesName = ref('')
const citiesName = ref('')
const districtsName = ref('')
const positionVal = ref([])

//省市区数据
const options = ref([])
const loadData = (selectedOptions: any) => {
  const targetOption = selectedOptions[selectedOptions.length - 1]
  targetOption.loading = true
  setTimeout(async () => {
    if (provincesId.value && citiesId.value == null) {
      targetOption.loading = false
      level.value = 1
      // parentCode1.value = targetOption.value
      let res = await getCity({
        parentCode: targetOption.value,
        level: 1,
      })
      targetOption.children = res.data.map((item: any) => {
        return {
          value: item.areaCode,
          label: item.name,
          isLeaf: false,
        }
      })
    } else if (citiesId.value && districtsId.value == null) {
      targetOption.loading = false
      level.value = 2

      let res = await getCity({
        parentCode: citiesId.value,
        level: 2,
      })
      targetOption.children = res.data.map((item: any) => {
        return {
          value: item.areaCode,
          label: item.name,
        }
      })
    }
    options.value = [...options.value]
  }, 100)
}

watch(islear, () => {
  if (islear.value) {
    level.value = 0
    parentCode.value = 0
    provincesId.value = 0
    districtsId.value = 0
    provincesName.value = ''
    citiesName.value = ''
    districtsName.value = ''
    positionVal.value = []
  }
})

const changePosition = (val: any, selectedOptions: any) => {
  provincesId.value = val[0]
  citiesId.value = val[1]
  districtsId.value = val[2]
  provincesName.value = selectedOptions[0] ? selectedOptions[0].label : ''
  citiesName.value = selectedOptions[1] ? selectedOptions[1].label : ''
  districtsName.value = selectedOptions[2] ? selectedOptions[2].label : ''
  if (selectedOptions.length == 3) {
    emit('onSelect', {
      provincesId: provincesId.value,
      citiesId: citiesId.value,
      districtsId: districtsId.value,
      provincesName: provincesName.value,
      citiesName: citiesName.value,
      districtsName: districtsName.value,
    })
  }
}
//修改时获取省市区的初始数据
// const initPositionData = async (
//   provincesId: any,
//   citiesId: any,
//   districtsId: any
// ) => {
//   storeInfo.value.positionVal = [provincesId, citiesId, districtsId]
//   // 初始化获取省级
//   let provinces = await getCity({
//     parentCode: 0,
//     level: 0,
//   })
//   options.value = provinces.data.map((item: any) => {
//     return {
//       value: item.areaCode,
//       label: item.name,
//       isLeaf: false,
//     }
//   })
//   // 初始化获取城市级
//   let cities = await getCity({
//     parentCode: provincesId,
//     level: 1,
//   })

//   let citieChildren = cities.data.map((item: any) => {
//     return {
//       value: item.areaCode,
//       label: item.name,
//       isLeaf: false,
//     }
//   })

//   //初始化县级
//   let districts = await getCity({
//     parentCode: citiesId,
//     level: 2,
//   })
//   let districtChildren = districts.data.map((item: any) => {
//     return {
//       value: item.areaCode,
//       label: item.name,
//     }
//   })

//   options.value.forEach((ele: any) => {
//     if (ele.value == provincesId) {
//       ele.children = citieChildren
//       ele.children.forEach((item: any) => {
//         if (item.value == citiesId) {
//           item.children = districtChildren
//         }
//       })
//     }
//   })
// }

onMounted(async () => {
  let res = await getCity({
    parentCode: parentCode.value,
    level: level.value,
  })
  options.value = res.data.map((item: any) => {
    return {
      value: item.areaCode,
      label: item.name,
      isLeaf: false,
    }
  })
})
</script>
